<template>
  <view class="detail-display-list">
    <!-- 头部 -->
    <view class="content-header">
      <view class="header-left">
        <i
          :class="`iconfont icon-${config.icon}`"
          style="font-size: 48rpx; color: #7c3aed"
        ></i>
        <text class="section-title">{{ config.title }}</text>
      </view>
      <button
        v-if="showActions && config.addButtonText"
        class="add-button"
        @click="$emit('add')"
      >
        <i
          class="iconfont icon-zengjiatianjiajiahao"
          style="font-size: 28rpx; color: #ffffff; margin-right: 8rpx"
        ></i>
        {{ config.addButtonText }}
      </button>
    </view>

    <!-- 列表容器 -->
    <view class="list-container">
      <!-- 加载状态 -->
      <view v-if="loading" class="loading-state">
        <uni-load-more status="loading" icon-type="snow"></uni-load-more>
        <text class="loading-text">正在加载{{ config.title }}...</text>
      </view>

      <!-- 空状态 -->
      <view v-else-if="list.length === 0" class="empty-state">
        <i
          :class="`iconfont icon-${config.icon}`"
          style="font-size: 96rpx; color: #d1d5db"
        ></i>
        <text class="empty-text">{{ config.emptyText }}</text>
        <text class="empty-hint">{{ config.emptyHint }}</text>
      </view>

      <!-- 列表 -->
      <view v-else class="list">
        <DetailDisplayItem
          v-for="(item, index) in list"
          :key="getItemKey(item, index)"
          :config="config"
          :item="item"
          :show-actions="showActions"
          @edit="$emit('edit', $event)"
          @delete="$emit('delete', $event)"
        >
          <!-- 文件展示插槽 -->
          <template #file-display="{ field, item }">
            <slot name="file-display" :field="field" :item="item" />
          </template>

          <!-- 操作按钮插槽 -->
          <template #actions="{ item }">
            <slot name="actions" :item="item">
              <!-- 默认编辑和删除按钮 -->
              <view class="action-buttons">
                <button class="edit-button" @click="$emit('edit', item)">
                  编辑
                </button>
                <button class="delete-button" @click="$emit('delete', item)">
                  删除
                </button>
              </view>
            </slot>
          </template>
        </DetailDisplayItem>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import type { DetailDisplayConfig } from "./detailDisplayConfig";
import DetailDisplayItem from "./DetailDisplayItem.vue";

// Props
interface Props {
  config: DetailDisplayConfig;
  list: any[];
  loading?: boolean;
  showActions?: boolean;
  itemKey?: string;
}

const props = withDefaults(defineProps<Props>(), {
  loading: false,
  showActions: true,
  itemKey: "ID",
});

// Emits
defineEmits<{
  add: [];
  edit: [item: any];
  delete: [item: any];
}>();

// 获取列表项的唯一标识
const getItemKey = (item: any, index: number): string => {
  const keyValue = item[props.itemKey];
  // 如果key为空、null、undefined或者是默认的GUID，生成唯一标识
  if (!keyValue || keyValue === "00000000-0000-0000-0000-000000000000") {
    return `item-${index}-${Date.now()}-${Math.random()
      .toString(36)
      .substr(2, 9)}`;
  }
  return keyValue;
};
</script>

<style scoped>
.detail-display-list {
  padding: 0rpx;
}

.content-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32rpx;
  padding: 0 8rpx;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.section-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #1f2937;
}

.add-button {
  background: #7c3aed;
  color: #ffffff;
  border: none;
  border-radius: 16rpx;
  padding: 4rpx 24rpx;
  font-size: 28rpx;
  font-weight: 500;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.add-button:hover {
  background: #6d28d9;
}

.add-button:active {
  background: #5b21b6;
}

.list-container {
  min-height: 400rpx;
}

.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80rpx 40rpx;
  gap: 24rpx;
}

.loading-text {
  font-size: 28rpx;
  color: #6b7280;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80rpx 40rpx;
  gap: 24rpx;
}

.empty-text {
  font-size: 32rpx;
  color: #6b7280;
  font-weight: 500;
}

.empty-hint {
  font-size: 28rpx;
  color: #9ca3af;
}

.list {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

.action-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 16rpx;
}

.edit-button {
  background: #3b82f6;
  color: #ffffff;
  border: none;
  border-radius: 12rpx;
  padding: 0rpx 24rpx;
  font-size: 24rpx;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.edit-button:hover {
  background: #2563eb;
}

.edit-button:active {
  background: #1d4ed8;
}

.delete-button {
  background: #ef4444;
  color: #ffffff;
  border: none;
  border-radius: 12rpx;
  padding: 0rpx 24rpx;
  font-size: 24rpx;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.delete-button:hover {
  background: #dc2626;
}

.delete-button:active {
  background: #b91c1c;
}
</style>
